<template>
    <div class="head">
      <div class="city-name">
        <i class="iconfont icon-dingwei"></i>
        {{state.city}}
      </div>
      <div class="city-change">
        <i class="iconfont icon-24gf-city4"></i>
        切换城市
      </div>
    </div>
    <div class="main">
      <div class="weather-info">
        <p class="temp">{{state.weather.temperature}}℃</p>
        <p class="info">{{state.weather.weather}}</p>
        <div class="detail">
          <div class="item">
            <i class="iconfont icon-shuidi"></i>
            <span>湿度</span>
            <span>{{state.weather.humidity}}%</span>
          </div>
          <div class="item">
            <i class="iconfont icon-fengliyucefangan"></i>
            <span>风向</span>
            <span>{{state.weather.windDirection}}风</span>
          </div>
          <div class="item">
            <i class="iconfont icon-a-fengchefenglikuaile"></i>
            <span>风力</span>
            <span>{{state.weather.windPower}}级</span>
          </div>
        </div>
      </div>
      <div class="future-info">
        <span>三日天气预报</span>
        <div class="future-weather">
            <div class="weather-item">
                <span>{{ weeks[state.forecast_one.week-1]}}</span>
                <div class="tianqi"><i>{{state.forecast_one.dayWeather}}</i></div>
                <div class="future-temperature">
                    <span>{{state.forecast_one.dayTemp}}</span>
                    <span>/{{state.forecast_one.nightTemp}}</span>
                </div>
            </div>
            <div class="weather-item">
                <span>{{ weeks[state.forecast_two.week-1]}}</span>
                <div class="tianqi"><i>{{state.forecast_two.dayWeather}}</i></div>
                <div class="future-temperature">
                    <span>{{state.forecast_two.dayTemp}}</span>
                    <span>/{{state.forecast_two.nightTemp}}</span>
                </div>
            </div>
            <div class="weather-item">
                <span>{{ weeks[state.forecast_three.week-1]}}</span>
                <div class="tianqi"><i>{{state.forecast_three.dayWeather}}</i></div>
                <div class="future-temperature">
                    <span>{{state.forecast_three.dayTemp}}</span>
                    <span>/{{state.forecast_three.nightTemp}}</span>
                </div>
            </div>
        </div>
      </div>
      <div class="container" ></div>
    </div>
  </template>
  
  <script setup>
  import AMapLoader from '@amap/amap-jsapi-loader';
  import { onMounted, reactive } from 'vue'
  
  const weeks = ['周一','周二','周三','周四','周五','周六','周日']


  const state = reactive({
    city: '北京市',
    weather: {},
    forecast_one: {},
    forecast_two: {},
    forecast_three: {}
  })
  
  
  onMounted(() => {
    window._AMapSecurityConfig = {
      securityJsCode: "54e6c2dde898de481627a35cdfce77d8",
    };
    AMapLoader.load({
      key: "d1b159770466a39aa96e53315d72b119", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
    .then((AMap) => {
      // 获取定位
      getLocalCity(AMap)
    })
  })
  
  const getLocalCity = (AMap) => {
    AMap.plugin('AMap.CitySearch', function () {
      var citySearch = new AMap.CitySearch()
      citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          // 查询成功，result即为当前所在城市信息
          //console.log(result.city);
          state.city = result.city
          getWeather(AMap)
          getWeatherForecast(AMap)
        }
      })
    })
  }

  const getWeather = (AMap) => {
    //加载天气查询插件
    AMap.plugin("AMap.Weather", function () {
      //创建天气查询实例
      var weather = new AMap.Weather();
      //执行实时天气信息查询
      weather.getLive(state.city, function (err, data) {
        console.log(err, data);
        state.weather = data
      });
    });
  }

  const getWeatherForecast = (AMap) => {
    AMap.plugin("AMap.Weather", function () {
    //创建天气查询实例
    var weather = new AMap.Weather();
    //执行实时天气信息查询
    weather.getForecast(state.city, function (err, data) {
        console.log(err,data);
        state.forecast_one = data.forecasts[1]
        state.forecast_two = data.forecasts[2]
        state.forecast_three = data.forecasts[3]
        //console.log(state.forecast[0].week)
        //err 正确时返回 null
        //data 返回天气预报数据，返回数据见下表
    });
    });
  }
  </script>
  
  <style lang="css" scoped>
  .head{
    height: 53px;
    background: #8E6FF7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 0 15px;
  }
  .city-name{
    font-size: 18px;
  }
  .city-change{
    font-size: 14px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
  }
  .main{
    padding: 7px 16px 20px 16px;
  }
  .weather-info{
    width: 100%;
    background: linear-gradient( 146deg, rgba(142,111,247,0.1) 0%, rgba(142,111,247,0.05) 100%), rgba(0,0,0,0);
    border-radius: 16px 16px 16px 16px;
    padding: 24px;
    box-sizing: border-box;
  }
  .temp{
    font-family: Roboto, Roboto;
    font-weight: 300;
    font-size: 60px;
    color: #000000;
    line-height: 60px;
    text-align: center;
  }
  .info{
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 14px;
    color: #4B5563;
    line-height: 21px;
    text-align: center;
  }
  .detail{
    display: flex;
    margin-top: 24px;
  }
  .item{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .item i{
    color: #8E6FF7;
  }
  .item span:nth-child(2) {
    font-size: 14px;
    color: #4B5563;
  }
  .item span:nth-child(3) {
    font-size: 16px;
    color: #000000;
  }
  .future-info {
    margin-top: 24px;
  }
  .future-info span {
    font-family: Roboto, Roboto;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    line-height: 28px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .future-weather { 
    display: flex;
    margin-top: 16px;
    
  }
  .future-weather .weather-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #FFFFFF rgba(0,0,0,0.001);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
    border-radius: 16px 16px 16px 16px;
    border: 1px solid #F3F4F6;
    margin-right: 16px;
    padding: 17px;
  }
  .future-weather .weather-item:last-child {
    margin-right: 0;
  }
  .future-weather .weather-item span {
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 14px;
    color: #4B5563;
    line-height: 20px;
    text-align: left;
  }
  .weather-item i {   
    margin-top: 8px;
    align-items: center;
    font-size: 24px;
    color: #8E6FF7;
  }
  .tianqi{
    display: flex;
    justify-content: center
  }
  .future-temperature {
    display: flex;
    margin-top: 8px;
    justify-content: center;
    align-items: center;
  }
  .future-temperature span:first-child {
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    line-height: 24px;
    text-align: center;
  }
  .future-temperature span:last-child {

    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 14px;
    color: #9CA3AF;
    line-height: 20px;
    text-align: center;
  }
  </style>